<template>
	<view class="box-class">
		<view class="left-view-class">
			<image class="image-class-star" src="@/static/star.png" v-if="isShowLeftImg"></image>
			<view :class="isShowLeftImg==true?'text-class':'text-class img-show'">{{title}}</view>
		</view>

		<view class="right-view-class" v-if="isShowInput" @click="inputClick(inta)">
			<input class="right-view-class text-align-right" type="digit" @input="inputDigit"
				v-if="isDigit" :placeholder="placeholder" :value="value">
			<input class="right-view-class text-align-right" type="number" v-else @input="inputPhone"
				:placeholder="placeholder" :value="value">
			<view class="text-class right-view">{{unitName}}</view>
		</view>
		<view class="right-view-class" @tap="selectClick(inta)" v-else>
			<view class="right-view-class"></view>
			<view class="text-color">{{selectName}}</view>
			<image class="image-class-right right-view" src="@/static/rightArrow81.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uniSendCar",
		props: {
			/**
			 * 是否显示前面的*号
			 */
			isShowLeftImg: {
				type: Boolean,
				default: false
			},

			title: {
				type: String,
				default: ''
			},
			unitName: {
				type: String,
				default: '万'
			},
			selectName: {
				type: String,
				default: '请选择'
			},
			/**
			 * 是显示input还是图片>
			 * true：显示input 
			 * flase：显示向右的箭头
			 */
			isShowInput: {
				type: Boolean,
				default: true
			},
			/**
			 * 确定是哪一个点击过来的，
			 */
			inta: {
				type: Number,
				default: 0
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			value: {
				type: String,
				default: ''
			},
			isDigit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputId: 0,
				val: ''
			};
		},
		methods: {
			inputPhone(e) {
				this.$emit('meInputPhone', e, this.inputId)
			},
			inputDigit(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				console.log(val);
				if (!val) {
					this.val = '';
					return
				}
				var reg = /[^\d.]/g

				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				console.log(val);
				console.log(this.inputId);
				this.$nextTick(() => {
					this.val = val;
				})
				this.$emit('meInputDigit', val, this.inputId)
			},
			inputClick(inta) {
				this.inputId = inta
			},
			selectClick(inta) {
				this.$emit('selectClick', inta)
			}
		}
	}
</script>

<style>
	.box-class {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 35rpx 0rpx;
	}

	.left-view-class {
		flex: 1;
		text-align: left;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.image-class-star {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.text-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.img-show {
		margin-left: 30rpx;
	}

	.right-view-class {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.text-align-right {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.image-class-right {
		width: 30rpx;
		height: 30rpx;
	}

	.right-view {
		margin-left: 10rpx;
	}

	.text-color {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
</style>